
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>试听预约</title>
    <link rel="stylesheet" href="__PUBLIC__/mobile/css/public.css">
    <link rel="stylesheet" href="__PUBLIC__/mobile/css/yuyue.css">
    <link rel="stylesheet" href="__PUBLIC__/mobile/css/lhgcalendar.css">
    <link rel="stylesheet" href="__PUBLIC__/mobile/css/user.css">

  <link href="__PUBLIC__/css/layui.css" rel="stylesheet" type="text/css" media="all"/>
  <script type="text/javascript" src="__PUBLIC__/layui.js"></script>

    <script type="text/javascript" src="__PUBLIC__/mobile/js/jquery-1.8.3.min.js"></script>
</head>
<body>
<div id="page" class="showpage">
    <header>
      <div class="tab_nav">
        <div class="header">
          <div class="h-left"><a class="sb-back" href="javascript:history.back(-1)" title="返回"></a></div>
          <div class="h-mid">我的预约</div>
        </div>
      </div>
      </header>

    <section class="f yuels" > 
       <img src="__ROOT__{$laoshi.face}" alt="头像"><div class="imgrl" style="float: left;">
      <div style="width: 100%;height: 25px;">
        <span><?php echo mb_substr($laoshi['sfz_name'], 0,1,'UTF-8').'老师' ?></span>
        <p style="width: 140px;margin-top: 2.5px;">{$laoshi.price}元/时起</p>
       </div>
        
        <div style="width: 100%;height: 20px;overflow: hidden;">
          <p class="lsxm" style="float: left;text-align: left;position: relative;height: auto;">
               {$laoshi.grades}{$laoshi.subject}
              <!-- 高一,高二,高三,高考,初二,初三,中考 -->              
              <em style="position: absolute;right: 0;bottom: 2px;display: none;">
                <!-- <img class="djzks" src="__PUBLIC__/mobile/images/zhankai.png" style="width: 18px;height: 18px;margin-right:0;">
                <img class="djsqs" src="__PUBLIC__/mobile/images/shouqi.png" style="width: 18px;height: 18px;margin-right:0;display: none;"> -->
              </em>
          </p>
          <p>授课城市:{$laoshi.city}</p>
       </div> 
    </div>
</section>

  <form action="{:U('mobile/index/shike_add')}" method="post">
  <div class="bginp">
        <div class="f">
            <label>试听日期<?php echo date('Y-m') ?>月</label>
            <div class="select bef uo" style="width:210px;">
                <select name="date" id="time" class="jintime" style="display: block;width: 100px;float: right;">
                  <option value="">选择开始日期</option>
                  <option value="1">1日</option>
                  <option value="2">2日</option>
                  <option value="3">3日</option>
                  <option value="4">4日</option>
                  <option value="5">5日</option>
                  <option value="6">6日</option>
                  <option value="7">7日</option>
                  <option value="8">8日</option>
                  <option value="9">9日</option>
                  <option value="10">10日</option>
                  <option value="11">11日</option>
                  <option value="12">12日</option>
                  <option value="13">13日</option>
                  <option value="14">14日</option>
                  <option value="15">15日</option>
                  <option value="16">16日</option>
                  <option value="17">17日</option>
                  <option value="18">18日</option>
                  <option value="19">19日</option>
                  <option value="20">20日</option>
                  <option value="21">21日</option>
                  <option value="22">22日</option>
                  <option value="23">23日</option>
                  <option value="24">24日</option>
                  <option value="25">25日</option>
                  <option value="26">26日</option>
                  <option value="27">27日</option>
                  <option value="28">28日</option>
                  <option value="29">29日</option>
                  <option value="30">30日</option>
                  <option value="31">31日</option>               
                </select>
            </div>
        </div>
        <div class="f">
            <label>试听时间</label>
            <div class="select bef uo">
                <select name="time" id="time" class="mingtime" style="display: block;width: 100px;float: right;">
                  <option value="">选择开始时间</option>
                  <option value="上午">上午</option>
                  <option value="下午">下午</option>
                  <option value="晚上">晚上</option>            
                </select>
            </div>
            <div class="clear"></div><em class="yuemoren">试听默认1课时</em>
        </div>
    </div>
    <div class="bginp"> 
       <div class="f"> 
          <label>具体地址</label>
        <!-- <input type="text" maxlength="140" name="address" id="longaddress" style="width:70%;float: right" placeholder="请输入具体地址" />  -->
          <div class="select bef uo">
              <select name="address" class="mingtime" style="display: block;width: 100px;float: right;">
                <option value="">选择城市区域</option>
                  <?php foreach ($city_quyu as $v) { ?>
                    <option value="{$v.city_name}">{$v.city_name}</option>
                  <?php } ?>            
              </select>
          </div>
       </div> 
      </div>
      <p style="text-align: center; font-size: 1.4rem; color: #A2A2A2;padding-bottom: 10px;">老师上门温馨提示：试听上课不需付费</p>
      <input type="hidden" name="ls_uid" value="{$laoshi.id}">
      <input type="hidden" name="city" value="{$laoshi.city}">
  
      <input type="hidden" name="class" value="{$laoshi.class}">
      <input type="hidden" name="grades" value="{$laoshi.grades}">
      <input type="hidden" name="subject" value="{$laoshi.subject}">
      <input type="submit" id="Zl-post" class="postMr" value="提交">
    </form>
</div>

</body>

<style>
.yuels p {
    float: right;
    margin-top: 0;
    height: 20px;
    line-height: 20px;
    width: 100px;
    text-align: right;
}
</style>
<script type="text/javascript">
$(function(){

  var winW = $(window).width();
  $('.imgrl').width(winW-70);
  $('.lsxm').width(winW-195);

  var lsxmH = $('.lsxm').height();
  if(lsxmH>20){
    $('.lsxm').height('20px');
    $('.lsxm').find('em').show();
  }
  
  $('.djzks').click(function(){
    $(this).parent().parent().parent().css('overflow','visible');
    $(this).parent().parent().css('height','auto');
    $(this).hide().siblings().show();
  });

  $('.djsqs').click(function(){
    $(this).parent().parent().css('height','20px');
    $(this).hide().siblings().show();
  });
  
}); 
</script>

<script type="text/javascript">
    layui.use(['form','layer'], function(){
      var layer = layui.layer
      ,form = layui.form();
      //layer.msg('Hello World');

    form.on('submit(*)', function(data){
      //console.log(data);
    $.ajax({
        url: "{:U('mobile/user/jz_zhuce')}",//请求地址
        type: "post",//请求方式
        dataType: "json",//返回数据类型
        data: data.field,//发送的参数
        })
        .done(function(response) {
              if(response.error==0){
                 layer.msg(response.info ,{icon:5});

              }else{
                 layer.msg(response.info ,{icon:6});
                 location.href = "{:U('mobile/index/index')}"

              }
          })
        .fail(function() {
            alert("ajxs交互失败");
        })  

      return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
    });   
    });
</script>
</html>